<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:p="http://primefaces.prime.com.tr/ui">

	<ui:composition>
		
		<header>
			<h2>User Account Control</h2>
		</header>
		<h:form id="change-password-form" styleClass="table_box">
		<h3>Change Password</h3>
		<rich:graphValidator id="check_password">
			<table width="100%" cellspacing="5" cellpadding="0" border="0">
				<tbody>
					<tr>
						<td align="right" width="200px"></td>
						<td>
							<div class="table_td_message"><rich:message for="check_password" /></div>
						</td>
					</tr>
					<tr>
						<td align="right">New Password*:</td>
						<td>
							<h:inputSecret value="#{mAccount.new_password}" id="new_pass" validator="#{mValidatorLib.PasswordValidate}" />
							<div class="table_td_message"><rich:message for="new_pass" /></div>
						</td>
					</tr>
					<tr>
						<td align="right">Re-type Password*:</td>
						<td>
							<h:inputSecret value="#{mAccount.confirm_password}" id="retype_pass" />
							<div class="table_td_message"><rich:message for="retype_pass" /></div>
						</td>
					</tr>
					<tr>
						<td align="right"></td>
						<td>
							<h:commandLink action="#{mAccount.updateNewPassword}" styleClass="button" value="Change My Password" />
						</td>
					</tr>
				</tbody>
			</table> 
		</rich:graphValidator>
		</h:form>

		<h:form id="account-info-form" styleClass="table_box">
			<rich:graphValidator id="ainfo">
				<h3>Account Information</h3>
					<table width="100%" cellspacing="5" cellpadding="0" border="0">
					<tbody>
						<tr>
							<td align="right"></td>
							<td>
								<div class="table_td_message"><rich:message for="ainfo" /></div>
							</td>
						</tr>
						
						<tr>
							<td align="right"  width="200px">Account ID Number:</td>
							<td>
								<h:inputText value="#{mAccount.acc.IDNumber}" style="text-transform:uppercase;font-weight:bold;" id="acc_id_number_seller" validator="#{mValidatorLib.IDNumberValidator}"/>
								<div class="table_td_message"><rich:message for="acc_id_number_seller"></rich:message></div>
							</td>
						</tr>
						<tr>
							<td align="right"  width="200px">Account Verified:</td>
							<td>
								<h:outputText value="#{mAccount.acc.isVerified eq true ? 'Verified' : 'Not Verified'}" style="font-weight:bold; text-transform:uppercase; #{mAccount.acc.isVerified eq true ? 'color:green;' : 'color:red' }" />&nbsp;
								<h:commandLink value="[Edit]" style="color:#ba450c;text-decoration:none;" rendered="#{!mAccount.acc.isVerified}" >
									  <rich:componentControl target="popup" operation="show" />
								</h:commandLink>
								<div class="table_td_message"></div>
							</td>
						</tr>
						<tr>
							<td align="right"></td>
							<td>
							<h:commandLink id="update_account_info" action="#{mAccount.updateAccountInfo}" styleClass="button" value="Update My Account Information">
										
							</h:commandLink></td>
						</tr>
					</tbody>	
					</table>
					<rich:popupPanel id="popup" modal="false" autosized="true" resizeable="false">
				        <f:facet name="header">
				            <h:outputText value="Upload ID Image" />
				        </f:facet>
				        <f:facet name="controls">
				            <h:outputLink value="#"
				                onclick="#{rich:component('popup')}.hide(); return false;">
				                    X
				                </h:outputLink>
				        </f:facet>
				      	<p>In order to improve your prestige, you need to be verified so the people will know your true identity</p>
				      	<p>To do this step, you need to scan your ID Card that match the ID Number you give us</p>
				      	<p>Our Staff will verify the information you give and change your status</p>
				      	<p>Your Image:</p>
				      	
				      	<h:form enctype="multipart/form-data" id="upload_image_form">
				      	 <h:panelGroup id="upload_form_group">	
				      		<p><p:graphicImage id="IDImage" value="#{mAccount.acc.IDImage}" width="200px" height="200px" rendered="#{mAccount.acc.IDImage != ''}"  /></p>
					      	 <p:fileUpload description="Image" sizeLimit="5242880" allowTypes="*.jpg" fileUploadListener="#{mAccount.handleFileUpload}" id="IDUploader"  update="upload_form_group"  />
					      	  <p:growl for="IDUploader" id="message_upload" />
					      	  </h:panelGroup>
				      	 </h:form>
				      	
    			</rich:popupPanel>
			</rich:graphValidator>
		</h:form>
		
		
		<h:form id="change-info-form" styleClass="table_box">
			<h3>User Information</h3>		
			<rich:graphValidator id="uinfo">
				<table width="100%" cellspacing="5" cellpadding="0" border="0">
					<tbody>
						<tr>
							<td align="right"></td>
							<td>
								
								<div class="table_td_message"><rich:message for="uinfo" /></div>
							</td>
						</tr>
						<tr>
							<td align="right"  width="200px">Owner's Name:</td>
							<td>
								<h:outputText value="#{mAccount.acc.name}"  style="text-transform:uppercase;font-weight:bold;" id="acc_name"/>
								<div class="table_td_message"></div>
							</td>
						</tr>
						<tr>
							<td align="right">Email:</td>
							<td>
								<h:outputText value="#{mAccount.acc.email}"  style="font-weight:bold;" id="acc_email"/>
								<div class="table_td_message"></div>
							</td>
						</tr>
						<tr>
							<td align="right">Country*:</td>
							<td>
								<h:selectOneMenu value="#{mAccount.acc.country}" id="acc_country">
										<f:selectItem itemValue="Australia" itemLabel="Australia" />
								</h:selectOneMenu>
								<div class="table_td_message"><rich:message for="acc_country" /></div>
							</td>
						</tr>
						<tr>
							<td align="right">State*:</td>
							<td>
								<h:selectOneMenu value="#{mAccount.acc.state}" id="acc_state">
												<f:selectItem itemValue="Sydney" itemLabel="Sydney" />
												<f:selectItem itemValue="Brisbane" itemLabel="Brisbane" />
												<f:selectItem itemValue="Adelaide" itemLabel="Adelaide" />
												<f:selectItem itemValue="Melbourne" itemLabel="Melbourne" />
												<f:selectItem itemValue="Perth" itemLabel="Perth" />
								</h:selectOneMenu> 
								<div class="table_td_message"><rich:message for="acc_state" /></div>
							</td>
						</tr>
						<tr>
							<td align="right">Address*:</td>
							<td>
								<h:inputText value="#{mAccount.acc.address}" id="acc_address" validator="#{mValidatorLib.AddressValidator}"/>
								<div class="table_td_message"><rich:message for="acc_address" /></div>
							</td>
						</tr>
						<tr>
							<td align="right">Phone*:</td>
							<td>
								<h:inputText value="#{mAccount.acc.phone}" id="acc_phone" validator="#{mValidatorLib.PhoneValidator}"/>
								<div class="table_td_message"><rich:message for="acc_phone" /></div>
							</td>
						</tr>
						<tr>
						<td align="right" width="200px"></td>
						<td>
							<div class="table_td_message"><rich:message for="check_security" /></div>
						</td>
					</tr>
					<tr>
						<td align="right">Security Question*:</td>
						<td>
							<label> 
									<h:selectOneMenu value="#{mAccount.acc.question}" id="acc_question">
										<f:selectItem itemLabel="What is your ID card number ?" itemValue="What is your ID card number ?"/>	
										<f:selectItem itemLabel="What is your mother's middle name ?" itemValue="What is your mother's middle name ?" />
										<f:selectItem itemLabel="What is your lover name ?"	itemValue="What is your lover name ?" />	
										<f:selectItem itemLabel="What is your favorite pet ?" itemValue="What is your favorite pet ?" />	
									</h:selectOneMenu> 
							</label>	
						</td>
					</tr>
					<tr>
						<td align="right">Security Answer*: </td>
						<td>
							<h:inputText value="#{mAccount.acc.answer}" id="acc_answer" validator="#{mValidatorLib.SecurityAnswerValidator}"/>
							<div class="table_td_message"><rich:message for="acc_answer" /></div>
						</td>
					</tr>
					
						<tr>
							<td align="right">&nbsp;</td>
							<td>
								<h:commandLink status="info_form_status" action="#{mAccount.updateBasicInfo}" styleClass="button" value="Update My Information" />
							</td>
						</tr>
					</tbody>
				</table>
			</rich:graphValidator>				
		</h:form>
		
		
	</ui:composition>
</html>